@include ('user.header',['title'=>'短网址域名列表'])
<div class="container">
    <!-- 面包屑导航 -->
    <div class="bg-white p-4 rounded mb-4 shadow-custom d-flex align-items-center justify-content-between transition-all duration-300 ease-in-out hover:shadow-custom-hover border border-primary">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="./" class="text-decoration-none text-primary hover:text-secondary transition-colors duration-300">
                        <i class="fa-solid fa-user me-2"></i> 用户中心
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="/user/domain-list" class="text-decoration-none text-primary hover:text-secondary transition-colors duration-300">
                        短网址域名列表
                    </a>
                </li>
                <li class="breadcrumb-item active text-secondary" aria-current="page">短网址列表[{{$domain['domain']}}]</li>
            </ol>
        </nav>
    </div>

    <!-- 搜索模态框 -->
    <div class="modal fade" id="search" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="myModalLabel">搜索域名</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="dwz-list" method="GET">
                        <div class="mb-3">
                            <input type="text" class="form-control form-control-lg" name="kw" placeholder="请输入域名" autofocus>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg w-100">
                            <i class="fa-solid fa-magnifying-glass"></i> 搜索
                        </button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    @if (isset($result))
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            {{ $result['msg'] }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @else
        <div class="d-flex justify-content-between mb-4">
            <a href="/user/dwz-add/{{$domain['id']}}" class="btn btn-success btn-lg">
                <i class="fa-solid fa-plus"></i> 添加短网址
            </a>
            <a href="#" data-bs-toggle="modal" data-bs-target="#search" class="btn btn-info btn-lg">
                <i class="fa-solid fa-magnifying-glass"></i> 搜索
            </a>
        </div>

        <div class="table-responsive">
            <table class="table table-hover table-striped table-bordered responsive-table">
                <thead class="table-light">
                    <tr>
                        <th>短链地址</th>
                        <th>跳转网址</th>
                        <th>添加IP</th>
                        <th>添加时间</th>
                        
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                @foreach ($dwz as $row)
                    <tr>
                        <td><a href="{{ $row['dwz'] }}" target="_blank" title="点击打开">{{ $row['dwz'] }}</a></td>
                        <td><a href="{{ $row['url'] }}" target="_blank" title="点击打开">{{ $row['url'] }}</a></td>
                        <td>{{ $row['created_at'] }}</td>
                        <td>{{ $row['ip'] }}</td>
                        <td>@if ($row['status']==1)<span class="badge bg-success">正常</span>@else<span class="badge bg-warning">待审</span>@endif</td>
                        <td>
                            <a href="/user/dwz-edit/{{ $row['id'] }}" class="btn btn-sm btn-primary">
                                <i class="fa-solid fa-pen-to-square"></i> 编辑
                            </a>
                            <a href="javascript:delete_confirm('{{ $row['id'] }}')" class="btn btn-sm btn-danger">
                                <i class="fa-solid fa-trash"></i> 删除
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        @if (admin_setting('dwz_audit', '0')==1)
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                添加后工作人员将在24小时之内尽快完成审核，审核之后即可使用！
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        {{ $dwz->links('page') }}
    @endif
</div>

<script>
  function delete_confirm(id){
      var del = confirm("你确定要删除该短网址吗？");
      if(del == true){
          var form = document.createElement('form');
          form.method = 'POST';
          form.action = "/api/dwz/del/"+id;
          
          // 添加CSRF令牌
          var csrfToken = document.createElement('input');
          csrfToken.type = 'hidden';
          csrfToken.name = '_token';
          csrfToken.value = "{{ csrf_token() }}";
          form.appendChild(csrfToken);
          
          // 添加API令牌
          var apiToken = document.createElement('input');
          apiToken.type = 'hidden';
          apiToken.name = 'api_token';
          apiToken.value = "{{ session('user')->api_token }}";
          form.appendChild(apiToken);
          
          document.body.appendChild(form);

          // 发起AJAX请求
          var xhr = new XMLHttpRequest();
          xhr.open('POST', form.action, true);
          xhr.setRequestHeader('Authorization', 'Bearer {{ session('user')->api_token }}');
          xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken.value);
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          
          xhr.onload = function() {
              if (xhr.status === 200) {
                  var response = JSON.parse(xhr.responseText);
                  if (response.status === '1') {
                      alert(response.msg);
                      window.location.reload();
                  } else {
                      alert('删除失败: ' + response.msg);
                  }
              } else {
                  alert('请求失败，请稍后重试');
              }
          };
          
          xhr.send(new FormData(form));
      }
  }
</script>

@include ('user.footer')